<template>
	<view class="">

		<view class="font">

			<view style="padding: 10rpx 0rpx;" class="Basics Basicsrblue">
				<view class="louis-center ">
					<text>class="louis-(m/p)-l-10p"</text>
				</view>
			</view>
			<view style="padding: 10rpx 0rpx;" class="louis-font-center Basics Basicsred">


				<view class="">
					注:<text>p百分比,m外距,p内距,l左,r右,t上,b下,tb上下,lr左右</text>
				</view>
			</view>

			<view w="200rpx" :key="Basicsclass" v-for="(Basicsclass,i) in Abbreviationlist" class="Basics ">
				<view  class="louis-space-between">
					<view class="">
						<louis-view  w="200rpx" style="line-height: 0rpx;" v-for="(item,index) in mincolorlist" :key="index" :class="['louis-bg-'+item.color,Basicsclass]"
						 class="colorblock">
						</louis-view>
					</view>
					<view class="">
						{{Basicsclass}}
					</view>
				</view>
			</view>




		</view>
		
		
		<view class="coloritem">
			<view class="font">
				<view class="Basics Basicsred louis-center">
					Vue可使用组件的方式实现自定义边距
				</view>
				<view style="padding: 10rpx 0rpx;" class="Basics Basicsrblue louis-center">
					<view class="louis-center louis-font-pixel">
						<text>{{louisview}}</text>
					</view>
				</view>
		
		
		
		
		
		
		
		
		
		
		
		
				<view class="Basics ">
					<view class="louis-space-between ">
						<view class="louis-felx-1">
		
							<louis-view class="louis-bg-D colorblock  louis-inline-block " 
							p='20rpx'
							>
		
							</louis-view>
						</view>
						<view class="louis-line-height-40rpx">
							p='20rpx'
						</view>
					</view>
				</view>
		
				<view class="Basics ">
					<view class="louis-space-between ">
						<view class="louis-felx-1">
		
						<louis-view class="louis-bg-D louis-font-center colorblock louis-inline-block" m="20rpx">			
							</louis-view>
						</view>
						<view class="louis-p-t-1p">
							 m="20rpx"
						</view>
					</view>
				</view>
				
				<view class="Basics ">
					<view class="louis-space-between ">
						<view class="louis-felx-1">
						<louis-view class="louis-bg-D louis-font-center colorblock louis-inline-block" p="20rpx 0rpx">			
						上下
						</louis-view>
						</view>
						<view class="louis-p-t-1p">
							 p="20rpx 0rpx"
						</view>
					</view>
				</view>
				
				<view class="Basics ">
					<view class="louis-space-between ">
						<view class="louis-felx-1">
						<louis-view class="louis-bg-D louis-font-center colorblock louis-inline-block" p="0rpx 40rpx">			
						左右
						</louis-view>
						</view>
						<view class="louis-p-t-1p">
							 p="0rpx 40rpx"
						</view>
					</view>
				</view>
				
				<view class="Basics ">
					<view class="louis-space-between ">
						<view class="louis-felx-1">
						<louis-view class="louis-bg-D louis-font-center colorblock louis-inline-block" p="40rpx 10rpx 0rpx 20rpx">			
						上右下左
						</louis-view>
						</view>
						<view class="louis-p-t-1p">
							 p="40rpx 10rpx 0rpx 20rpx"
						</view>
					</view>
				</view>
				
				<view class="Basics ">
					<view class="louis-space-between ">
						<view class="louis-felx-1">
						<louis-view class="louis-bg-D louis-font-center colorblock louis-inline-block" m="40rpx 40rpx 0rpx 20rpx">			
						上右下左
						</louis-view>
						</view>
						<view class="louis-p-t-1p">
							 m="20rpx 0rpx 20rpx 0rpx"
						</view>
					</view>
				</view>
				
				
			
						
						
				<!-- <view class="Basics ">
					<louis-view style="margin: 10rpx 20rpx;" class="louis-radius-10rpx" color='#ddd'>
		
						<view class="louis-padding-10rpx">
							{{louisitem}}标签
						</view>
						<view class="louis-padding-10rpx">
							
						</view>					
					</louis-view>
				</view>
		 -->
			</view>
		</view>
		
		<louis-view p='20rpx'>
		</louis-view>

	</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				louisitem: '<louis-view>',
				louisview: "<louis-view p='10rpx' m='10rpx'   ></view>",
				maglist: [
					"louis-m-10rpx",
					"louis-m-right-20rpx",
					"louis-m-left-20rpx",
					"louis-m-top-15rpx",
					"louis-m-bottom-15rpx",
					"louis-m-tb-20rpx",
					"louis-m-lr-20rpx"
				],
				Abbreviationlist: [
					"louis-m-5p",
					"louis-m-r-20p",
					"louis-m-l-20p",
					"louis-m-t-10p",
					"louis-m-b-10p",
					"louis-m-tb-10p",
					"louis-m-lr-20p"
				],
				mincolorlist: [

					{
						color: "P",
						name: "普通",
						hex: "#409EFF"
					},
					// {
					// 	color: "S",
					// 	name: "成功",
					// 	hex: "#67C23A"
					// },
					// {
					// 	color: "D",
					// 	name: "危险",
					// 	hex: "#F56C6C"
					// }

				],
			};
		},
		mounted() {

		},
		methods: {

		}
	}
</script>

<style scoped lang="less">
	.Fonttextbox {
		// height: 4000rpx;
		overflow: hidden;

	}

	.Fonttext {
		// -webkit-text-stroke: 1px #6893a0;
		position: absolute;
		z-index: 200;
		color: rgba(255, 255, 255, 0.7);
		width: 100%;
		height: 100%;
		top: 42rpx;
		right: 0rpx;
		width: 200rpx;
		font-size: 45rpx;
		// transform:skewX(23deg);
		// color: #db79a5;
		font-weight: bold;
		opacity: 0.8;
	}

	.Basics {
		color: #FFF;
		font-size: 25rpx;
		margin-bottom: 10rpx;
		margin-left: 10rpx;
		margin-right: 10rpx;
		border-radius: 10rpx;
		padding: 20rpx;
		border: 2px solid #C0C0C0;

		background-color: rgba(29, 5, 41, 0.2);
		padding-top: 15rpx;
		padding-bottom: 20rpx;
		box-sizing: border-box;
		// &:active {
		// 	background-color: rgba(206, 31, 84, 0.8);
		// }
	}

	.Basicsred {
		background-color: rgba(206, 31, 84, 0.5);
	}

	.Basicsrblue {
		background-color: rgba(64, 158, 255, 0.5);
	}

	.font {
		margin-top: 20rpx;
	}

	.coloritem {
		position: relative;
		// top: -50rpx;
	}

	.colorblock {
		// width: 100rpx;
		// height: 20rpx;
		min-height: 20rpx;
		min-width: 20rpx;
		//             min-width: 30rpx;
		// min-height: 30rpx;
		// font-size: 25rpx;
		display: inline-block;
		// margin-left: 7rpx;
		// margin-top: 10rpx;
		// width: 130rpx;
		// height: 130rpx;
		border-radius: 10rpx;
		// padding: 10rpx;
		box-sizing: border-box;
		overflow: hidden;
	}

	.colorblock:nth-child(5n) {
		margin-right: 0rpx;
	}

	#F {
		color: #000000
	}

	.louis-bg-MD {
		// background-color: rgba(0,0,0,0.1);
		display: inline-block;
		padding: 5rpx 10rpx;

	}
</style>
